<template>
  <h5>toRefs的使用</h5>
  <!-- <h5>name:{{ state.name }}</h5>
  <h5>age:{{ state.age }}</h5> -->
  <h5>name:{{ name }}</h5>
  <h5>age:{{ age }}</h5>
</template>
<script>
  import { defineComponent, reactive, toRefs} from 'vue';
  export default defineComponent({
    name:'ToRefsUse',
    setup(){
      const state = reactive({
        name:'jackson',
        age:29
      })
      // toRefs可以把响应式对象转为普通对象,该普通对象的每个Proxy都是一个 ref
      // const state2=toRefs(state)
      const {name,age}=toRefs(state)
      // 定时器,更新数据(如果数据变化,界面也变,肯定是响应式数据)
      setInterval(() => {
        // state.name+='==='
        // state2.name.value+='==='  
        name.value+='==='
      }, 1000);
      return{
        // state,
        // ...state  //不是响应式的数据--->{name:'jackson',age:29} 已经成为这种结构了
        // ...state2  //toRefs返回的对象
        name,age
      }
    }
  })
</script>
<style scoped>
</style>